<template>

    <div class="login-form">
        <el-form ref="formRef" :rules="rules" label-position="right" label-width="1" :model="loginData">
            <el-form-item>
                <div style="text-align: center; width: 100%;color: #ffffff; font-size: 15px; font-weight: bold;">
                    用户注册</div>
            </el-form-item>
            <el-form-item prop="username">
                <el-input placeholder="请输入账号" v-model="loginData.username" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input placeholder="请输入密码" type="password" v-model="loginData.password" />
            </el-form-item>
            <el-form-item>
                <el-button style="width: 100%;" @click="submitForm">登录</el-button>
            </el-form-item>
            <el-form-item>
                <el-button style="width: 100%;" @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { UserLoginPost } from '@/api/setting/users/index.js'
import { loginInfoStore, permissionStore } from '@/stores/index.js'
import { reactive, ref, onMounted } from 'vue'
const loginData = reactive({
    lessees_id: '000001',
    username: '',
    // username: 'ADMIN',
    password: ''
    // password: '123456'
})

const loginInfoStoreData = loginInfoStore()
const permissionData = permissionStore()

const rules = reactive({
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 2, max: 50, message: '长度为2-50', trigger: 'blur' },
    ],
})


const route = useRouter()

const formRef = ref(null);


onMounted(() => {
    console.log(sessionStorage.getItem("logOut"))
    if (sessionStorage.getItem("logOut") == 'true') {
        console.log('刷新')
        sessionStorage.setItem("logOut", 'false')
        // location.reload();
    }

});

const submitForm = async () => {
    let validMsg = await formRef.value.validate((valid) => {
        if (valid) {
            // let arr_data = await UserLoginPost(loginData)
            // ElMessage.success('表单验证通过');
            // 执行提交操作
            return true
        } else {
            // ElMessage.error('信息录入错误');
            return false;
        }

    });
    console.log(validMsg)
    if (validMsg == false) {
        ElMessage.error('信息录入错误')
        return
    }
    try {
        let arr_data = await UserLoginPost(loginData)
        console.log(arr_data.status)
        if (arr_data.status == 203) {
            const ElMessageBox1 = await ElMessageBox.confirm('用户在线中是否强制退出重新登录?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).catch(() => {
                console.log('Cancelled!');
            });
            console.log(ElMessageBox1)
            if (ElMessageBox1=='confirm') {
                loginData.off = 1
                await submitForm()
            }
            return
        }
        if (arr_data.status != 201) {
            return
        }
        loginInfoStoreData.dep = arr_data.data.dep
        loginInfoStoreData.username = arr_data.data.username
        loginInfoStoreData.dep_name = arr_data.data.dep_name
        loginInfoStoreData.user_id = arr_data.data.user_id
        loginInfoStoreData.token = arr_data.data.token

        // 存储token获取的时间
        sessionStorage.setItem("tokenTime", Date.now())
        sessionStorage.setItem("token", arr_data.data.token)
        sessionStorage.setItem("user_id", arr_data.data.user_id)
        loginInfoStoreData.menuActive = '/home'
        ElMessage.success('登录成功')
        route.push({ path: '/home' })
    } catch (error) {
        ElMessage.error('接口请求异常' + error)
    }
};

// 重置表单
const resetForm = () => {
    loginData.username = ''
    loginData.password = ''
    formRef.value.clearValidate()

}

</script>

<style lang='less' scoped>
.login-form {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    // min-width: 320px;
    min-height: 100vh;
    height: 100%;
    flex-direction: column;
    background-color: rgb(48, 65, 86);
}

.el-form {
    border-radius: 10px;
    // box-shadow: var(--el-box-shadow-light);
    box-shadow: 0px 0px 12px #FFFFFF;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    // opacity: 0.8;
    // opacity: 0.9;
    width: var(--login-form-width);
}
</style>